<template>
  <div class="switch">
    <el-row>
      <el-col :span="6">
        <el-switch 
        v-model="value" 
        active-color="#13ce66" 
        inactive-color="#ff4949"
        active-text="打开"
        inactive-text="关闭"><!-- 
          active-color:开始颜色
          inactive-color：结束颜色
         -->

        </el-switch>
      </el-col>

      <el-col :span="6">
        <el-switch 
        v-model="value2" 
        active-color="#13ce66" 
        active-value="100"
        inactive-value="0"
        @change="change">

        </el-switch>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Switch",
    data() {
      return {
        value: true,
        value2: 100
      }
    },
    methods: {
      change(value){
        console.log(value)
      }
    },
  }
</script>

<style scope>

</style>